import React, { useEffect, useState } from 'react'
import { Reqsvg, gologin } from "@/services/index"
import { Input, Checkbox, Radio, RadioChangeEvent, Button } from 'antd';
import { UserOutlined, UnlockOutlined, VerifiedOutlined } from '@ant-design/icons';
import { Isvg } from '@/utils/login'
import style from './login.less'
import { IRouteComponentProps } from "umi"
import { setCookie } from '@/utils/auth';

const login: React.FC<IRouteComponentProps> = ({ history, location }) => {
    const [value, setValue] = React.useState(1);
    const [svgs, setsvg] = useState<Isvg>({} as Isvg)
    const [username, setusername] = useState("")
    const [password, setpassword] = useState("")
    const [code, setcode] = useState("")
    const [key, setkey] = useState("")
    const onChange = (e: { target: { checked: any; }; }) => {
        console.log(`checked = ${e.target.checked}`);
    }
    const onChangeRadio = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
        if (e.target.value == 1) {
            setkey("student")
        } else {
            setkey("teacher")
        }
    };
    const imgs = () => {
        Reqsvg().then(res => {
            if (res.code == 200) {
                setsvg({ ...res })
            }
        })
    }
    const onlogin = () => {
        let obj = {
            code,
            key,
            password,
            username,
            uuid: svgs.uuid
        }
        if (key == "teacher") {
            gologin(obj).then(res => {
                if (res.code == 200) {
                    setCookie(res.token)
                    if (location.query.redirect) {
                        history.replace(decodeURIComponent(location.query.redirect as string));
                    } else {
                        history.replace('/');
                    }
                    history.push("/teachers/postskill")

                }
            })
        } else {
            gologin(obj).then(res => {
                if (res.code == 200) {
                    setCookie(res.token)
                    if (location.query.redirect) {
                        history.replace(decodeURIComponent(location.query.redirect as string));
                    } else {
                        history.replace('/');
                    }
                    history.push("students/highPost")

                }
            })
        }
    }
    useEffect(() => {
        imgs()
    }, [])
    return <div className={style.login}>
        <div className={style.main}>
            <div><h2>八维生产性实训平台</h2></div>
            <div><Input size="large" placeholder="用户名" prefix={<UserOutlined />} value={username} onChange={(e) => setusername(e.target.value)} /></div>
            <div><Input.Password size="large" placeholder="密码" prefix={<UnlockOutlined />} value={password} onChange={(e) => setpassword(e.target.value)} /></div>
            <div>
                <div><Input size="large" placeholder="验证码" prefix={<VerifiedOutlined />} value={code} onChange={(e) => setcode(e.target.value)} /></div>
                <div onClick={() => imgs()}><img src={svgs.img ? "data:image/gif;base64," + svgs.img : ""} alt="" /></div>
            </div>
            <div>
                <div><Checkbox onChange={onChange}>记住密码</Checkbox></div>
                <div>
                    <Radio.Group onChange={(e) => onChangeRadio(e)} value={value}>
                        <Radio value={1}>学生</Radio>
                        <Radio value={2}>老师</Radio>
                    </Radio.Group>
                </div>
            </div>
            <div><Button type="primary" onClick={() => onlogin()}>登录</Button></div>
        </div>
    </div>
}
export default login